<template>
  <div id="not-onsale">
    <!-- 导航 -->
    <div id="nav-box">
      <div
        class="nav-item"
        :class="{ selected: $route.path.indexOf('/success') != -1 }"
        @click="
          $router.push(
            '/user/' + $store.getters.user_address + '/notonforsale/success'
          )
        "
      >
        审核成功
      </div>
      <div
        class="nav-item"
        :class="{ selected: $route.path.indexOf('/refushed') != -1 }"
        @click="
          $router.push(
            '/user/' + $store.getters.user_address + '/notonforsale/refushed'
          )
        "
      >
        审核失败
      </div>
      <div
        class="nav-item"
        :class="{ selected: $route.path.indexOf('/audit') != -1 }"
        @click="
          $router.push(
            '/user/' + $store.getters.user_address + '/notonforsale/audit'
          )
        "
      >
        审核中
      </div>
      <div
        class="nav-item"
        :class="{ selected: $route.path.indexOf('/mysole') != -1 }"
        @click="
          $router.push(
            '/user/' + $store.getters.user_address + '/notonforsale/mysole'
          )
        "
      >
        已购买
      </div>
    </div>
    <transition name="notonsale-router" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "NotOnsale",
};
</script>

<style lang='less'>
// 路由切换动画
.notonsale-router-enter,
.notonsale-router-leave-to {
  transform: translateY(50vh);
  opacity: 0;
}
.notonsale-router-enter-active,
.notonsale-router-leave-active {
  transition: all 0.2s ease;
}
#not-onsale {
  min-height: 200px;
  #nav-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
    .nav-item {
      cursor: pointer;
      margin: 0 10px;
      border-radius: 99px;
      color: var(--themeColor4);
      padding: 5px 10px;
    }
    .selected {
      background: var(--themeColor4);
      color: #fff;
    }
  }
}
</style>